<template>
    <div>
        <h1>子组件</h1>
        <h2>{{info}}</h2>
        <h2>{{obj}}</h2>
        <h2>{{msg.msg}}</h2>
        <h2>{{msg1}}</h2>
        <h2>vue2当中的attrs用法</h2>
        <h2>{{$attrs.msg}}</h2>
        <button @click="pinchuan">拼串 触发fun事件</button>
        <grand-son></grand-son>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import GrandSon from './GrandSon.vue'
export default defineComponent({
    components:{
        GrandSon
    },
    // props:['info','obj'],
    //在vue3当中很多的方法定义，都在setup当中进行定义，setup当中是否能拿到props
    props:{
        info:{
            type:String,
            required:true,
            default:'xxx'
        },
        obj:{
            type:Object,
            required:false,
            default:()=>{
                return{}  //写默认值时，对于基本类型直接写初始值即可，对于引用数据类型（数组和对象），需要写成函数的格式
            }
        }
    },
    emits:['fun','foo'], //传递过来的自定义的名字 可写可不写（建议写上） 声明有利于阅读代码
    // setup的参数 的参数有两个 props,context对象
    setup (props,context) {
        //在setup当中传入的参数props,变为一个proxy对象
        console.log(props);
        console.log(props.info);
        console.log(props.obj);
        console.log(context);
        // context 对象的值 attrs emit slots
        console.log(context.attrs);
        console.log(context.attrs.msg);
        const msg=context.attrs; //proxy对象 reactive包裹了一个对象，变成一个proxy对象 该类对象是响应式的
        const msg1=ref(context.attrs.msg); //ref对象
        console.log(context.emit);
        // 调用事件  相当于this.$emit  触发分发事件
        context.emit('fun','都发芽了');

        // 需求：当用户点击页面上的按钮 拼串 触发fun事件
        function pinchuan(){
            context.emit('fun','都发芽了');
            context.emit('foo');
        }

        // slots
        console.log(context.slots);  //插槽 相当于$slots
        return {
            msg,
            msg1,
            pinchuan
        }
    },
    // setup(props,{attrs,emit,slots}){
    //     // 解构出来之后直接使用
    // }
    mounted(){
        console.log(this.$attrs);
        // 在vue2当中的写法 this.$emit(事件名，事件的参数)
    }
})
</script>

<style scoped>

</style>